<template>
  <div>
    <el-container>
      <el-header>
        <div>
          <h1 style="color: #ffffff">创建问卷</h1>
        </div>
      </el-header>
      <el-main>
        <Row type="flex" justify="center" align="top" class="code-row-bg" :gutter="25">
          <div style="margin-left: 10px; top: 15px; position: absolute; left: 20px">
              <span

                ><Icon
                @click.native="Back()"
                  type="ios-arrow-back"
                  size="28"
                  style="cursor: pointer; color: #f7f7f7; vertical-align: sub"
              /></span>
              <strong style="font-size: 1.5rem; margin-left: 10px;color:#ffffff">我的题库</strong>
              
            </div>
          <Col span="6">
            <!-- <Card style="height:730px;background-color:rgb(197, 193, 193)" >
                <p  slot="title">已创建的问卷</p> -->
            <Card :style="{ height: contentHeight + 35 + 'px' }" style=" overflow: auto">
              <h3 slot="title">已创建的问卷</h3>
              <div
                v-for="(item, index) in questionCreated"
                :key="index.questionId"
                :padding="3"
              >
                <Card style="margin: 5px">
                  <!-- <Button type="default" @click="answerPage">预览</Button> -->
                  <!-- <div
                  v-for="(item, index) in questionCreated"
                  :key="index.questionId"
                  :padding="3" 
                > -->
                  <div>
                    <span style="float: left; padding: 0 2.5px">
                      <Icon type="ios-list" color="gray" :size="20" />
                    </span>
                    <span
                      style="padding: 5px; cursor: pointer"
                      @click="showQuestion(index, questionCreated)"
                    >
                      <strong style="color: #57a3f3" class="name" :title="item.name">{{
                        item.name
                      }}</strong>
                    </span>
                    <div style="float: right">
                      <template>
                        <span
                          style="
                            margin-left: 5px;
                            margin-right: 3px;
                            cursor: pointer;
                            color: gray;
                          "
                          title="Delete"
                          @click="deleteTest(index, questionCreated)"
                        >
                          <Icon type="ios-trash" :size="20" color="gray" />
                        </span>
                        <!-- <span
                          style="
                            margin-left: 5px;
                            margin-right: 3px;
                            cursor: pointer;
                            color: gray;
                          "
                          title=" Preview"
                          @click="previewQuestions(index, questionCreated)"
                        >
                          <Icon type="ios-eye" :size="20" color="gray" />
                        </span> -->

                        <!-- <span
                          style="
                            margin-left: 5px;
                            margin-right: 3px;
                            cursor: pointer;
                            color: gray;
                          "
                          title="Download"
                          @click="questionDownload(index, questionCreated)"
                        >
                          <Icon
                            type="ios-cloud-download-outline"
                            :size="20"
                            color="gray"
                          />
                        </span> -->
                      </template>
                    </div>
                  </div>
                </Card>
              </div>
            </Card>
          </Col>
          <Col span="18">
            <Row
              type="flex"
              justify="center"
              align="top"
              class="code-row-bg"
              :gutter="25"
            >
              <Col span="12">
                <Card style="height: 350px">
                  <div style="text-align: center">
                    <br /><br />
                    <h2>创建空白问卷</h2>
                    <br /><br />
                    <Input
                      v-model="questionTitle"
                      placeholder="请输入标题"
                      style="width: 400px"
                    ></Input>
                    <br /><br /><br /><br /><br />
                    <Button type="primary" @click="createQuestions">立即创建</Button>
                  </div>
                </Card>
              </Col>
              <Col span="6">
                <Card style="height: 350px">
                  <div style="text-align: center">
                    <br /><br />
                    <h2>自动组卷</h2>
                    <br />
                    <p>导入题库，自动生成问卷</p>
                    <br /><br />
                    <!-- <img  src="../../../assets/images/text-lead.png"><br>     -->
                    <Button @click="importQuestionBankShow = true"
                      ><img src="../../../assets/images/text-lead.png" /><br />
                    </Button>
                    <!-- <Button type="primary" @click="AutomaticPaper">立即创建</Button> -->
                  </div>
                </Card>
              </Col>
              <Col span="6">
                <Card style="height: 350px">
                  <div style="text-align: center">
                    <br /><br />
                    <h2>导入分享模板</h2>
                    <br /><br /><br /><br />
                    <img class="image" src="../../../assets/images/share.png" />
                  </div>
                </Card>
              </Col>
            </Row>
            <br />
            <Row>
              <Col>
                <Card :style="{ height: contentHeight - 345 + 'px' }">
                  <h2>复制参考模板</h2>
                  <el-empty description="暂无模板"></el-empty>
                </Card>
              </Col>
            </Row>
          </Col>
        </Row>
      </el-main>
    </el-container>
    <Modal v-model="importQuestionBankShow" title="导入题库">
      <!-- <iframe :src="previewUrl" frameborder="0" style="width: 100%;height:100%; min-height:450px;"></iframe> -->
      <Alert show-icon style="margin-top: 15px; width: 100%" closable>
        提示
        <Icon type="ios-bulb-outline" slot="icon"></Icon>
        <template slot="desc">该功能正在测试中，敬请期待。 </template>
      </Alert>
      <div slot="footer">
        <Button type="success" @click="previewModalShow = false">确定</Button>
      </div>
    </Modal>
    <!-- <Modal v-model="importQuestionBankShow" title="导入题库" width="800px">
      <Steps :current="addQuestionStep" style="margin: auto; width: 60%">
        <Step title="组卷配置"></Step>
        <Step title="组卷内容"></Step>
      </Steps>
      <Form
        :label-width="100"
        style="margin-left: 30px; margin-top: 30px"
        v-if="addQuestionStep == 0"
      >
        <FormItem label="问卷名称" prop="description">
          <Input
            v-model="questionnaireName"
            type="textarea"
            placeholder="填写问卷名称…"
            style="width: 560px"
            :autosize="{ minRows: 1 }"
          />
        </FormItem>
        <FormItem label="选择题库">
          <Row>
            <Col span="16">
              <Select v-model="myQuestionBank" style="width: 200px">
                <Option v-for="item in questionBank" :value="item.name" :key="index">{{
                  item.name
                }}</Option>
              </Select>
            </Col>
          </Row>
        </FormItem>

        <FormItem label="组卷配置" prop="questionNumber">
          <span>单选题：</span
          ><Input
            v-model="singleChoiceScore"
            style="width: 40px; margin-left: 20px"
          ></Input
          ><span style="margin-left: 5px">分/题</span>
          <Input
            v-model="ChoiceQuestionNumber"
            style="width: 40px; margin-left: 20px"
          ></Input
          ><span style="margin-left: 5px">道</span><br />
          <span>多选题：</span
          ><Input
            v-model="multipleChoiceScore"
            style="width: 40px; margin-left: 20px"
          ></Input
          ><span style="margin-left: 5px">分/题</span>
          <Input
            v-model="multipleChoiceQuestionNumber"
            style="width: 40px; margin-left: 20px"
          ></Input
          ><span style="margin-left: 5px">道</span><br />
          <span>简答题：</span
          ><Input
            v-model="shortAnswerScore"
            style="width: 40px; margin-left: 20px"
          ></Input
          ><span style="margin-left: 5px">分/题</span>
          <Input
            v-model="shortAnswerQuestionNumber"
            style="width: 40px; margin-left: 20px"
          ></Input
          ><span style="margin-left: 5px">道</span><br />
        </FormItem>
        <FormItem label="问卷描述" prop="description">
          <Input
            v-model="description"
            type="textarea"
            placeholder="填写任务描述…"
            style="width: 560px"
            :autosize="{ minRows: 3 }"
          />
        </FormItem>
        <FormItem label="起止时间" prop="timeRange">
          <DatePicker
            v-model="timeRange"
            type="daterange"
            format="yyyy-MM-dd"
            placeholder="选择时间…"
            style="width: 560px"
          ></DatePicker>
        </FormItem>
      </Form>

      <div slot="footer">
        <Button type="primary" @click="goNextStep" v-if="addQuestionStep == 0"
          >下一步
        </Button>
        <Form
          :model="formTop"
          label-position="top"
          :label-width="100"
          style="margin-left: 30px; margin-top: 30px"
          v-if="addQuestionStep == 1"
        >
          <FormItem>
            <div style="text-align: left" v-for="(item, ques) in questions" :key="ques">
              <p style="text-align: left">{{ item.name }}</p>
 
              <span style="text-align: left">{{ item.subjectContent }}</span>
              <span style="text-align: left">({{ item.score }}分)</span>
              <br />
              <el-radio-group
                style="text-align: left"
                v-if="item.questionType === 1"
                v-model="item.examineAnswer"
              >
                <el-radio
                  style="text-align: left"
                  v-for="(opt, option) in item.optionAll"
                  :key="option"
                  :label="opt.pqaId"
                  class="answer-radio"
                  >{{ opt.answerContent }}</el-radio
                >
              </el-radio-group>
              <el-checkbox-group
                style="text-align: left"
                v-if="item.questionType === 2"
                v-model="item.examineAnswer"
              >
                <el-checkbox
                  style="text-align: left"
                  v-for="(opts, options) in item.optionAll"
                  :key="options"
                  :label="opts.pqaId"
                  class="answer-checkbox"
                  >{{ opts.answerContent }}</el-checkbox
                >
              </el-checkbox-group>
              <el-input
                :disabled="disabledAnswer"
                v-if="item.questionType === 3"
                type="textarea"
                :rows="4"
                v-model="item.examineAnswer"
                resize="none"
                maxlength="150"
              >
              </el-input>
            </div>

            <div></div>

        
          </FormItem>
        </Form>

        <Button type="warning" @click="goPreStep()" v-if="addQuestionStep == 1"
          >上一步</Button
        >
        <Button
          type="success"
          @click="createTask('formValidate')"
          v-if="addQuestionStep == 1"
          >创建</Button
        >
      </div>
     
    </Modal> -->
  </div>
</template>
<script>
import { get, post, del, put } from "@/axios";
export default {
  data() {
    return {
      contentHeight: "",
      questionTitle: "",
      addQuestionStep: 0,
      importQuestionBankShow: false,
      singleChoiceScore: 0,
      ChoiceQuestionNumber: 0,
      multipleChoiceScore: 0,
      multipleChoiceQuestionNumber: 0,
      shortAnswerScore: 0,
      shortAnswerQuestionNumber: 0,
      questionCreated: [],
      questionnaireName: "",
      description: "",
      myQuestionBank: "",
      questionBank: [],
      questionBankList: "",
      timeRange: "",
      sectionJSON: {
        totalScore: 100,
        list: [
          {
            name: "name",
            description: "description",
            type: "singleSelect",
            size: 10,
            totalScore: 30,
          },
          {
            name: "name",
            description: "description",
            type: "multiSelect",
            size: 5,
            totalScore: 30,
          },
          {
            name: "name",
            description: "description",
            type: "fillInBlank",
            size: 5,
            totalScore: 15,
          },
          {
            name: "name",
            description: "description",
            type: "quesAndAnswer",
            size: 1,
            totalScore: 25,
          },
        ],
      },
    };
  },
  created() {

    this.initSize();
  },
  mounted() {
    this.viewTests();
    this.browseQuestionBank();
    window.addEventListener("resize", this.initSize);
  },
  beforeDestroy: function () {
    window.removeEventListener("resize", this.initSize);
  },
  methods: {
    Back (){
      this.$router.push("/newPersonalPage/myQuestionBank");
   
    },
    async deleteTest(index, questionCreated) {
      let id = this.questionCreated[index].id;
      // console.log(id);

      try {
        let res = await get("/visualResourceLibrary/questionnaire/test/del/" + id);
        // console.log(res.data.data);
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
      this.viewTests();
    },
    async browseQuestionBank() {
      let page = 0;
      let size = 10;
      try {
        let res = await get(
          "/visualResourceLibrary/questionnaire/quesBank/" + page + "/" + size
        );
        // console.log(res.data.data);
        this.questionBank = res.data.data.content;
        // console.log(this.questionBank);
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    async viewTests() {
      let page = 0;
      let size = 100;
      try {
        let res = await get(
          "/visualResourceLibrary/questionnaire/test/" + page + "/" + size
        );
        // console.log(res.data.data);
        this.questionCreated = res.data.data.content;
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    createQuestions() {
      if(this.questionTitle==""){
        this.$Message.warning('请输入试卷名称');
      }
      else{
        this.$router.push({
                path: "/createQuestions",
                query: { value: this.questionTitle },
              });
      }
    },
    initSize() {
      this.contentHeight = window.innerHeight - 140;
    },
    previewQuestions() {
      this.$router.push("/previewQuestions");
    },
    answerPage() {
      this.$router.push({
        path: "/answerPage",
        query: { examName: this.questionCreated.name },
      });
    },
    // questionDownload() {
    //   console.log(this.questionCreated);
    // },
    AutomaticPaper() {
      this.$router.push("/AutomaticPaper");
    },
    goNextStep() {
      this.addQuestionStep = 1;
    },
    goPreStep() {
      this.addQuestionStep = 0;
    },
  },
};
</script>

<style>
.createTaskBtn {
  font-size: 10px;
}
.createTaskBtn:hover {
  color: white;
  background: #276be9;
}
.el-header {
  background-color: #152350c4;
  color: #333;
  text-align: center;

  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;

  line-height: 20px;
}
.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 20px;
}
.image {
  width: 120px;
  height: 120px;
}
.subject-title {
  padding-left: 10px;
  width: 100%;
  height: 45px;
  line-height: 45px;
  background: #f7f7f7;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.subject-title h2 {
  font-size: 16px;
  display: inline-block;
}
.subject-title span {
  font-size: 16px;
  display: inline-block;
}

.subject-remark {
  background: #f7f7f7;
}
.subject-remark .item {
  display: block;
  padding: 5px;
}
.subject-remark .title {
  font-weight: bold;
}
.el-radio >>> .el-radio__input.is-checked .el-radio__inner {
  background-color: #13ce66;
  border-color: #13ce66;
}

.el-radio-button >>> .el-radio-button__inner {
  padding: 10px;
}

.el-collapse-item h2 {
  width: 150px;
  font-size: 14px;
  display: inline-block;
}
.el-form--label-top >>> .el-form-item__label {
  float: none;
  display: inline-block;
  text-align: left;
  padding: 0px;
}

.el-card {
  margin: 10px;
}

.el-card >>> .el-card__header {
  background-color: #ffffff;
  padding: 0px 10px;
  line-height: 35px;
  font-size: 16px;
}
.el-card >>> .el-card__body {
  padding: 5px 20px;
}
</style>
